import React from "react";
import { useNavigate, NavLink } from "react-router-dom";
import styles from "./header.module.scss";
import pichead from "../../image/pichead.jpg";
import { Arrow, UserCircleO, Search, HomeO } from "@react-vant/icons";

interface HeaderProps {
  center?: string;
}

 const Header: React.FC<HeaderProps> = ({ center }) => {
  const navigate = useNavigate();
  const userInfo =
    JSON.parse(localStorage.getItem("user") as string) || null;
  return (
    <div>
      <div style={{ height: "30px" }}></div>
      <div className={styles.search}>
        <NavLink to="/my">
          {userInfo ? (
            <img src={pichead} alt="头像加载失败" className={styles.ren}></img>
          ) : (
            <UserCircleO className={styles.ren} />
          )}
        </NavLink>
        <div className={styles.center}>
          {center == "doctor" ? (
            <b>医生列表</b>
          ) : (
            <div className={styles.searchs}>
              <Search className={styles.sou} />
              <span
                onClick={() => {
                  navigate("/search");
                }}
              >
                请输入症状/疾病
              </span>
            </div>
          )}
        </div>
        <HomeO className={styles.ling} />
      </div>
    </div>
  );
};
export default Header